<template>
	<div class="mainos">
		<div class="main_spac1 paddingBottom5">
			<div class="main_white padding10 paddingBottom20">
				<div class="main_crumbs boxdq">
					<div class="main_crumbs_l">
						<a href="javascript:;" @click="$router.back(-1)">
							<i class="el-icon-arrow-down"></i>返回
						</a>
						<em>|</em>
						<span>学校详情</span>
					</div>
				</div>
				<div v-loading="loading">
					<div class="main_tile boxdq marginTop10">
						<div class="main_tile_l marginLeft0"><em></em><span>学校详细信息</span></div>
					</div>
					<div class="main_xq">
						<el-descriptions :column="6" size="mini" border>
							<template slot="extra">
								<el-button type="primary" size="small">操作</el-button>
							</template>
							<!-- 学校名称 -->
							<el-descriptions-item :span="2">
								<template slot="label">
									<i class="el-icon-user"></i>
									学校名称：
								</template>
								kooriookami
							</el-descriptions-item>
							<!-- 学校负责人 -->
							<el-descriptions-item :span="2">
								<template slot="label">
									<i class="el-icon-mobile-phone"></i>
									学校负责人：
								</template>
								18100000000
							</el-descriptions-item>
							<!-- 学校所在地 -->
							<el-descriptions-item :span="2">
								<template slot="label">
									<i class="el-icon-location-outline"></i>
									学校所在地：
								</template>
								苏州市
							</el-descriptions-item>
							<!-- 负责人电话 -->
							<el-descriptions-item :span="2">
								<template slot="label">
									<i class="el-icon-tickets"></i>
									负责人电话：
								</template>
								<el-tag size="small">学校</el-tag>
							</el-descriptions-item>
							<!-- 学校详细地址 -->
							<el-descriptions-item :span="4">
								<template slot="label">
									<i class="el-icon-office-building"></i>
									学校详细地址：
								</template>
								江苏省苏州市吴中区吴中大道 1188 号
							</el-descriptions-item>
							<!-- 学校创建时间 -->
							<el-descriptions-item :span="2">
								<template slot="label">
									<i class="el-icon-user"></i>
									学校创建时间：
								</template>
								kooriookami
							</el-descriptions-item>
							<!-- 学校状态 -->
							<el-descriptions-item :span="2">
								<template slot="label">
									<i class="el-icon-user"></i>
									学校状态：
								</template>
								kooriookami
							</el-descriptions-item>
							<!-- 审核结果 -->
							<el-descriptions-item :span="2">
								<template slot="label">
									<i class="el-icon-user"></i>
									审核结果：
								</template>
								kooriookami
							</el-descriptions-item>
							<!-- 学校logo -->
							<el-descriptions-item :span="3">
								<template slot="label">
									<i class="el-icon-user"></i>
									学校logo：
								</template>
								<img
									src="https://t9.baidu.com/it/u=3457525958,446071884&fm=218&app=126&size=f242,150&n=0&f=JPEG&fmt=auto?s=48D131C01BE4B17A0EFC910F0200F0C0&sec=1691773200&t=e876f0aa65f327372730c2b118d9b095" />
							</el-descriptions-item>
							<!-- 学校资质 -->
							<el-descriptions-item :span="3">
								<template slot="label">
									<i class="el-icon-user"></i>
									学校资质：
								</template>
								<img
									src="https://t9.baidu.com/it/u=3457525958,446071884&fm=218&app=126&size=f242,150&n=0&f=JPEG&fmt=auto?s=48D131C01BE4B17A0EFC910F0200F0C0&sec=1691773200&t=e876f0aa65f327372730c2b118d9b095" />
							</el-descriptions-item>


						</el-descriptions>
					</div>
					<div class="main_tile boxdq marginTop10">
						<div class="main_tile_l marginLeft0"><em></em><span>竞价排名</span></div>
					</div>
					<div class="main_table marginTop0 settlement">
						<el-table ref="sortTable" :data="tableData" border style="width: 100%" row-key="id">
							<el-table-column prop="date" label="日期" width="180">
							</el-table-column>
							<el-table-column prop="label" label="姓名" width="180">
							</el-table-column>
							<el-table-column prop="address" label="地址">
							</el-table-column>
							<el-table-column align="right">
								<template slot="header" slot-scope="scope">
									<el-button type="text" @click="ranking">竞价排序</el-button>
								</template>
							</el-table-column>
						</el-table>
					</div>
					<div class="main_tile boxdq marginTop20">
						<div class="main_tile_l marginLeft0"><em></em>结算记录</div>
					</div>
					<!-- <div class="main_table marginTop0 settlement">
						<el-table ref="multipleTable" v-loading="listLoading" :data="settlement_logs" element-loading-text="加载中" fit
							highlight-current-row max-height="205">
							<el-table-column label="结算单号" prop="new_order_sn" class-name="main_hei">
								<template slot-scope="scope">
									{{ scope.row.new_order_sn }}
									<i class="el-icon-document-copy set_default" style="margin-left: 10px"
										@click="handleCopy(scope.row)"></i>
								</template>
							</el-table-column>
							<el-table-column label="单据类型" prop="operate" class-name="main_hei">
								<template slot-scope="scope">
									<span :class="'type' + scope.row.type">
										{{ scope.row.type == 1 ? "订单" : "退货单" }}
									</span>
								</template>
							</el-table-column>
							<el-table-column label="金额" prop="content" class-name="main_hei">
								<template slot-scope="scope">
									{{
										info.info.is_prior_payment == 1
										? scope.row.account_money
										: scope.row.collect_money
									}}
								</template>
							</el-table-column>
							<el-table-column label="结算时间" prop="created_at" class-name="main_hei">
								<template slot-scope="scope">{{
									parseTime(scope.row.created_at)
								}}</template>
							</el-table-column>
						</el-table>
					</div> -->
					<div class="main_tile boxdq marginTop20">
						<div class="main_tile_l marginLeft0"><em></em>生命周期</div>
					</div>
					<!-- <div class="main_table marginTop0">
						<el-table ref="multipleTable" v-loading="listLoading" :data="info.logs" element-loading-text="加载中" fit
							highlight-current-row>
							<el-table-column label="管理员" prop="admin.name" class-name="main_hei" />
							<el-table-column label="操作" prop="operate.name" class-name="main_hei" />
							<el-table-column label="内容" prop="content" class-name="main_hei">
								<template slot-scope="scope">
									<div v-for="(content, index) in scope.row.content" :key="index" class="marginTop5 marginBottom5">
										{{ content }}
									</div>
								</template>
							</el-table-column>
							<el-table-column label="IP" prop="ip" class-name="main_hei" />
							<el-table-column label="时间" prop="created_at" class-name="main_hei">
								<template slot-scope="scope">{{
									parseTime(scope.row.created_at)
								}}</template>
							</el-table-column>
						</el-table>
					</div> -->
				</div>
			</div>
			<el-dialog title="竞价排名" :visible.sync="dialogVisible" width="70%">
				<!-- <el-transfer :titles="['未参与排名', '参与排名']" filterable :filter-method="filterMethod" filter-placeholder="请输入城市拼音"
					v-model="value" :data="tableData" @change="rankingChange">
				</el-transfer> -->
				<el-tree :data="treeData1" ref="treeIn" class="tree" node-key="id" default-expand-all draggable
					:allow-drag="returnTrue" @node-drag-start="handleDragstart" @node-drag-end="handleDragend"></el-tree>
				<el-tree :data="treeData2" ref="treeOut" class="tree" node-key="id" default-expand-all draggable
					:allow-drop="returnTrue" @node-drop="handleDrop"></el-tree>
				<span slot="footer" class="dialog-footer">
					<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
				</span>
			</el-dialog>
		</div>
	</div>
</template>

<script>
import { Md5 } from "@/utils/public";
import pinyin from 'js-pinyin'
import Sortable from 'sortablejs'
export default {
	data() {
		return {
			loading: false,

			// 竞价排名列表
			tableData: [],

			// 竞价排名模态框
			dialogVisible: false,

			value: [0, 1],
			filterMethod(query, item) {
				return item.pinyins.indexOf(query) > -1;
			},




			treeData1: [{
				id: 1,
				label: "1-1111",
				children: [{
					id: 4,
					label: "2-1111",
					children: [{ id: 9, label: "3-1111" }]
				}],
			}],
			treeData2: [{
				id: 2,
				label: "1-2222",
				children: [{
					id: 5,
					label: "2-2222",
					children: [{ id: 8, label: "3-2222" }],
				}],
			}],
		}
	},
	mounted() {
		this.rowDrop();
	},
	created() {
		// let a = '你好'
		// pinyin.setOptions({ checkPolyphone: true, charCase: 1 });
		// let b = pinyin.getFullChars(a)
		this.getList()
	},
	methods: {
		getList() {
			let data = [{
				date: '2016-05-02',
				name: '王小虎1',
				address: '上海市普陀区金沙江路 1518 弄'
			}, {
				date: '2016-05-04',
				name: '王小虎2',
				address: '上海市普陀区金沙江路 1517 弄'
			}, {
				date: '2016-05-01',
				name: '王小虎3',
				address: '上海市普陀区金沙江路 1519 弄'
			}, {
				date: '2016-05-03',
				name: '王小虎4',
				address: '上海市普陀区金沙江路 1516 弄'
			}]
			let list = []
			data.forEach((city, index) => {
				list.push({
					date: city.date,
					address: city.date,
					label: city.name,
					key: index,
					pinyins: pinyin.getFullChars(city.name)
				});
			});
			this.tableData = list
		},
		generateData() {
			const data = [];
			// const cities = ['上海', '北京', '广州', '深圳', '南京', '西安', '成都'];
			// const pinyin = ['shanghai', 'beijing', 'guangzhou', 'shenzhen', 'nanjing', 'xian', 'chengdu'];
			pinyin.setOptions({ checkPolyphone: true, charCase: 1 });
			this.tableData.forEach((city, index) => {
				data.push({
					label: city.name,
					key: index,
					pinyins: pinyin.getFullChars(city.name)
				});
			});
			return data;
		},

		// 拖拽表格
		rowDrop() {
			const table = this.$refs.sortTable.$el.querySelectorAll(".el-table__body-wrapper > table > tbody")[0];
			const that = this
			Sortable.create(table, {
				animation: 1000,
				onEnd({ newIndex, oldIndex }) {
					// 拖拽排序数据
					that.tableData.splice(newIndex, 0, that.tableData.splice(oldIndex, 1)[0])
					const newArray = that.tableData.slice(0)
					that.tableData = [] // 必须有此步骤，不然拖拽后回弹
					that.$nextTick(function () {
						that.tableData = newArray // 重新赋值，用新数据来刷新视图
						this.updateIndex(that.tableData)//更改列表中的序号，使序号1.2.3.4.....显示，不然就是行拖拽后乱序显示如:3.2.4.1...
					})
				}
			});
		},

		updateIndex(tableData) {
			tableData.forEach((item, index) => {
				item.orderNum = index + 1;
			});
		},

		// 竞价排名模态框
		ranking() {
			this.dialogVisible = true
		},

		rankingChange(e) {
			if (e.length >= 2) {
				return false
			} else {
				this.value = e
			}
		},
		//左侧节点触发拖拽
		handleDragstart(node, event) {
			console.log('start', node, event)
			//在左侧节点触发拖拽的时候触发右侧节点的拖拽事件
			this.$refs.treeOut.$emit('tree-node-drag-start', event, { node: node });
		},
		//拖拽结束，但是确定是否成功
		handleDragend(draggingNode, endNode, position, event) {
			console.log('end', draggingNode, endNode, position, event)
			// 新的空节点
			let newData = { id: (+new Date), children: [] };
			//在左tree插入拖拽的节点
			this.$refs.treeIn.insertBefore(newData, draggingNode);
			//右tree触发结束拖拽事件
			this.$refs.treeOut.$emit('tree-node-drag-end', event);
			this.$nextTick(() => {
				// 如果是移动到了自身---
				console.log(this.$refs.treeIn.getNode(draggingNode.data))
				if (this.$refs.treeIn.getNode(draggingNode.data)) {
					this.$refs.treeIn.remove(newData);
					console.log('移动到自身')
				} else {
					// 如果移动到了右tree上----
					let data = JSON.parse(JSON.stringify(draggingNode.data));
					this.$refs.treeIn.insertAfter(data, this.$refs.treeIn.getNode(newData));
					this.$refs.treeIn.remove(newData);
					console.log('移动到别的tree')
				}
			})
		},
		//结束拖拽，可得到拖拽来源与去向
		//  handleDrop(draggingNode, dropNode, dropType, ev) {
		//     console.log('移动结束',draggingNode, dropNode, dropType,ev);
		//   },
		returnTrue() {
			return true;
		},
		returnFalse() {
			return false;
		}
	},
};
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";

.tree {
  display: inline-block;
  overflow: hidden;
  width: 200px;
  height: 300px;
  border: 1px solid #444;
}

.mainos {
	.main_tile {
		.mainos_tile_r {
			color: $colour_red;
			font-size: $font_14;
		}
	}
}

/deep/.settlement .el-table tr {
	.set_default {
		display: none;
		margin-left: 10px;
	}
}

/deep/.settlement .el-table tr:hover {
	.set_default {
		display: inline-block;
		cursor: pointer;
	}
}

/deep/ .settlement .el-table--small td .cell {
	display: flex;
	align-items: center;
	height: auto;
}


/deep/.el-descriptions__header {
	display: none
}
</style>
